/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";
@import "components/ui.selectmenu";
@import "components/conditional_release";

$border: #C1C7CF;
$borderRadius: 3px;
$discussion-dark-text: $ic-color-dark;

.hidden {
  display: none !important;
}

.entry.deleted.no-replies {
  display: none !important;
}

.show-deleted .entry.deleted.no-replies {
  display: block !important;
}

.right-align {
  text-align: right;
}

.pull-right {
  float: right;
}

.show-if-collapsed {
  display: none !important;
}

.collapsed {
  .hide-if-collapsed {
    display: none !important;
  }
  .show-if-collapsed {
    display: block !important;
  }
}

.discussion-entries {
  list-style: none;
  margin: 0;
  padding: 0;

  .entry {
    background: $ic-color-light;
    border: 1px solid $ic-border-light;
    padding: 0;
    margin: $ic-sp 0 $ic-sp*2 $ic-sp*2;

    &.collapsed, .entry {
      margin: 16px 0 16px 18px;
    }

    .deleted-discussion-entry {
      padding-bottom: $borderRadius;

      &.reply-box-container {
        padding: 10px 0;
      }
    }

    .discussion-header-content {
      padding-top: 8px;
    }

    .deleted-discussion-entry .right-of-avatar {
      padding-top: 0 !important;
    }

    .entry .right-of-avatar {
      padding-top: 0;
    }

    .entry {
      box-shadow: none;
      margin: 0 !important;
      border: none;
      border-radius: 0;
      border-top: solid 1px $border;

      .avatar {
        width: 32px;
        height: 32px;
      }

      .discussion_entry {
        margin: 0;
        border-bottom: none;
      }

      .discussion-header-content {
        padding-top: 0;
      }
    }
  }
}

.side_comment_discussion .entry .entry .replies {
  display: none;
}

.discussion_entry {
  position: relative;
  margin: 0;
  background: white;
  padding: 6px;
  .al-trigger {
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 0px;
  }
}

.new-and-total-badge {
  float: right;
}

.discussion-section {
  padding: 4px 10px 3px 10px;
}

.peer-review-alert {
  .peer-review-title {
    line-height: 21px;
    margin: 0;
    a {
      display: inline-block;
      margin-left: 3px
    }
  }
  .icon-peer-review {
    position: relative;
    top: 4px;
    &:before {
      top: 0;
    }
  }
}

.reply-textarea {
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
  min-height: 155px;
  width: 100%;

  @media screen and (min-width: 1100px) {
    min-height: 129px
  }
}

.toggle-wrapper {
  margin: 0 11px;
  text-align: right;
}

.due_date_wrapper {
  color: $discussion-dark-text;
}

.topic {
  h1.discussion-title {
    @include fontSize(19px);
    font-weight: normal;
    line-height: 30px;
  }
  h2.discussion-title {
    @include fontSize(16px);
  }
  .discussion-title {
    @include fontSize(19px);
  }
}

.discussion-title {
  @include fontSize(13px);
  font-weight: bold;
  line-height: 23px;
  margin: 0;
}

.discussion-subtitle {
  @include fontSize(11px);
  margin: 0;
}

.discussion-points {
  color: $discussion-dark-text;
}

.discussion-pubdate {
  @include fontSize(11px);
  color: $discussion-dark-text;
  line-height: 23px;
}

.discussion-assignment-section {
  .row-fluid [class*="span"] {
    min-height: 0;
  }
  .discussion-title {
    font-size: 14px !important;
    font-size: 0.875rem !important;
  }
}


.discussion-fyi {
  font-style: italic;
  @include fontSize(12px);
  color: darken($ic-color-neutral, 45);
}

.discussion-read-state-btn {
  position: absolute;
  top: 4px;

  bottom: 0;
  width: 10px;
  height: 10px;
  padding: 12px;
  display: block;
  left: -($ic-sp*3);
}

.discussion-read-state {
  box-sizing: border-box;
  border: 1px solid #2e89cc;
  border-radius: 5px;
  width: 10px;
  height: 10px;
  background: $ic-brand-primary;
}

.read .discussion-read-state {
  background: #fff;
  border: 1px solid $ic-color-dark;
}

.discussion-read-state-btn {
  left: -32px;
}

.discussion-reply-action, .discussion-rate-action {

  color: $ic-font-color-dark;
  text-decoration: none;

  &:hover, &:focus {
    text-decoration: none;
    color: #444;
  }
}

.discussion-rate-action {
  margin-left: 12px;
}

.discussion-rate-action--checked {
  color: $ic-link-color;
  &:hover, &:focus {
    color: $ic-link-color;
  }
}

.discussion-rating {
  @if $use_high_contrast { color: #666; }
  @else {color: $ic-font-color-dark;}
}

.entry, .discussion_entry {

  .show-if-replying {
    display: none;
  }
  &.replying {
    .hide-if-replying {
      display: none;
    }
    .show-if-replying {
      display: block;
    }
  }
}

.discussion-entry-reply-area {
  padding: 0 0.8em;
}

.discussion_entry > .discussion-entry-reply-area {
  padding: 0 0.8em;
  border: 1px solid $ic-border-light;
}


.entry-content {
  .avatar {
    float: left;
    margin: 3px 8px 0 0;
  }
}

.entry {
  & > .bottom-reply-with-box {
    .discussion-entry-reply-area {
      padding: 0 0.8em;
      border-top: 1px solid #d4d5d7;
      border-radius: 0 0 3px 3px;

      &.reply-box-container {
        padding: 15px 0.8em;
        margin: 0;

        .discussion-reply-box {
          margin: 0;
        }
      }
    }
  }
}

.topic {
  padding: 0;
  background: transparent;
}

.discussion-reply-form {
  margin: 0;
  padding-bottom: 1em;
}

.entry {
  .cancel_button {
  @include fontSize(11px);
  }
}

.discussion-header-content {
  padding-top: 5px;

  .author.unknown {
    font-style: italic;
  }
}

.discussion-reply-attachments {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 0 0 0 20px;
    margin: 0;
    background: transparent url(/images/messages/attach-gray.png) left center no-repeat;
  }
  a {
    display: inline-block;
    text-indent: -1000em;
    width: 16px;
    height: 16px;
    background: transparent url(/images/delete_circle.png) left center no-repeat;
  }
}

.discussion-reply-add-attachment {
  display: inline-block;
}

.discussion-reply-attachments-container {
  float: left;
}

.discussion-reply-buttons {
  float: right;
}

.message-notification, .notification {
  background: #ffffcc;
}

.deleted-discussion-entry {
  .discussion-header-content {
    min-height: 0;
  }
  .discussion-title {
    @include fontSize(12px);
    font-style: italic;
  }
}

.add_root_reply {
  display: inline-block;
  margin-top: 20px;
}

.showMore {
  margin: 0;
  border-top: 1px solid $border;
  background: white;
  padding: 10px 10px 13px 10px;
  @include fontSize(10px);
  font-weight: bold;
  @include clearfix;
  a {
    float: left;
    text-transform: uppercase;
    &:after {
      content: "";
      display: inline-block;
      position: relative;
      left: 4px;
      top: 2px;
      bottom: 2px;
      height: 0px;
      width: 0px;
      border-style: solid;
      border-color: #396eb2 transparent transparent transparent;
      border-width: 5px;
      vertical-align: middle;
    }
  }
  .new-and-total-badge {
    margin-top: 0;
    float: right;
  }
}

.showMore:hover {
  background: $ic-color-light;
  cursor: pointer;
  a {
    text-decoration: underline;
  }
}

.entry-controls {
  overflow: auto;
  padding: 10px;
  @include fontSize(12px);

  .new-and-total-badge {
    float: left;
    margin: 0;
  }
}

.topic {
  margin: 0;
  overflow: auto;

  .entry-content {
    padding: $ic-sp;
    border-left: 1px solid $ic-border-light;
    border-right: 1px solid $ic-border-light;
  }
}

.entry-header {
  border-bottom: none;
}

.discussion_subentries {
  padding: $ic-sp 0 $ic-sp $ic-sp;
}

.discussion-page-nav {
  ul {
    @include fontSize(12px);
    margin: 0;
    padding-bottom: 20px;
    list-style: none;
    text-align: right;
    height: 1em;
  }
  li {
    display: inline-block;
  }
  .item {
    display: block;
    padding: 4px 12px 4px 8px;
    border-right: 1px solid $border;
  }
  li:last-child .item {
    border-right: none;
  }
}

.new-and-total-badge {
  .new-items, .total-items {
    font-weight: normal;
    @include fontSize(10px);
  }
}

.highlight .entry-content {
  outline: 3px solid $ic-brand-primary;
}

.highlight .entry .entry-content {
  outline: none;
}

.discussion-reply-box {
  $bg-color: #fdfdfd;
  display: block;
  background-color: $bg-color;
  cursor: text;
  border: 1px solid #d4d5d7;
  margin: 15px 0;

  @if $use_high_contrast { color: $ic-font-color-dark; }
  transition: border-color 0.2s;
  padding: $ic-sp/2 $ic-sp;
  &:hover, &:focus {
    color: #444;
    text-decoration: none;
    border-color: $ic-link-color;
  }
}

.add-side-comment-wrap {
  padding: 10px 10px 10px 41px;
  border-top: solid 1px #e4e5e7;
}

.message *:last-child {
  margin-bottom: 0;
}

.message_wrapper {
  padding-top: 2px;
  padding-bottom: 2px;
}

#discussion_container {
  .al-trigger {
    background: none;
    border-color: white;
  }
  .al-trigger:hover, .al-trigger.ui-state-active {
    border-color: #c2c2c2;
    border-bottom-color: #bfbfbf;
  }
}

.accessibility-warning {
  @include accessibility-prompt;
  @include fontSize(14px);
}

.collapsable:hover, .collapsable:focus {
  cursor: pointer;
  &:before {
    display: block;
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    height: 0px;
    width: 0px;
    border-style: solid;
    border-color: transparent transparent #396eb2 transparent;
    border-width: 8px;
  }
}

.collapse-discussion {
  display: block;
}

.collapsed .collapsable:hover {
  border-color: white;
}

.collapsed .collapsable:before {
  top: 10px;
  border-color: #396eb2 transparent transparent transparent;
}

.bootstrap-form {
  margin: 0;
}

#discussion-managebar {
  div.form-inline {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  #keyboard-shortcut-modal-info {
    padding: 4px 0px 3px 0px;

    .accessibility-warning {
      display: none;
    }
  }
}

.headerBar {
  @include clearfix;
}

#filterResults {
  .entry {
    margin-top: 0;
    margin-bottom: 5px;
  }
  .entry-controls {
    display: block !important;
  }
  .entry:hover {
    .discussion_entry {
      cursor: pointer;
      .viewInDiscussion {
        text-decoration: underline;
      }
    }
  }
}

.toolbarView {
  background: white;
  min-height: 50px;
  &#discussion-toolbar {
    + .discussion-entry-reply-area { margin-top: -1px; }
  }
  .admin-links {
    text-align: left;
    float: none;
    display: inline;
  }
  .al-trigger {
    margin-left: 4px;
  }
  .headerBar {
    min-height: 53px;
    overflow: visible;
    box-sizing: border-box;
    padding: $ic-sp;
    background: $lightBackground;
    border: 1px solid $ic-border-light;
  }
  .headerBar:after {
    clear: both;
    content: "";
    display: block;
  }
  .sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 15; // increase for discussions sticky toolbar
    border-color: $ic-border-light;
    background: $lightBackground;
    min-height: 53px;
    margin-left: $ic-header-primary-width + ($ic-sp*2);
    margin-right: $ic-sp*2;
    box-shadow: 0 2px 3px rgba(black, 0.1);
  }
  [disabled] {
    display: none;
  }
}

.discussion-topic-due-dates {
  color: $discussion-dark-text;
  margin: 16px 0;
  width: 100%;
  th {
    font-weight: bold;
    text-align: left;
  }
}

#discussion-toolbar {
  .topic-subscribe-button { display:none; }
  .topic-unsubscribe-button { display:none; }

  &.unsubscribed {
    .topic-subscribe-button { display:inline-block; }
  }
  &.subscribed {
    .topic-unsubscribe-button { display:inline-block; }
  }
}
